import React from 'react';


import classnames from 'classnames';
//component


import './index.less';


export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
        list: React.PropTypes.array,
        onItemSeleted:React.PropTypes.func,
    };

    static defaultProps = {
        //name: 'component name'
        list:[],
        onItemSeleted:()=>{}
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            list:props.list
        };
    }
    componentWillMount() {
        this._isMounted = true;

    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            list:nextProps.list
        })
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    handleItemClick(data,index,e){
        this.props.onItemSeleted(data,index,e);
    }

    render() {
        

        const classNames = classnames({
            'orin-sw-renavigation-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames} >
                <ul className="nav-wrap">
                    {
                        this.state.list.map((data,index)=>(
                            <li key={index} onTouchTap={(e)=>this.handleItemClick(data,index,e)} className="nav-item"> {data.element}</li>
                        ))
                    }
                </ul>
            </div>
        );
    }
}
